
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:syn_4s/core/extension/int_extension.dart';
import 'package:syn_4s/ui/shared/app_theme.dart';
import 'package:syn_4s/ui/widgets/main_title.dart';

class DialogTitle extends StatelessWidget {

  final String title;
  final String type;

  const DialogTitle(this.title, this.type, {super.key});

  @override
  Widget build(BuildContext context) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        SvgPicture.asset("assets/images/rhombic.svg",width: 14.px,height: 14.px,),
        SizedBox(width: 2.px,),
        buildTitle(),
        const Spacer(),
        buildDeviceState(),
        GestureDetector(
            child: SvgPicture.asset("assets/images/map_icon_close.svg",width: 24.px,height: 24.px,),
            onTap: ()=> Navigator.pop(context)
        )
      ],
    );
  }

  Widget buildTitle() {
    return ClipPath(
      clipper: PolygonClipper(),
      child: Container(
        padding:
        EdgeInsets.only(top: 2.px, bottom: 2.px, left: 2.px, right: 12.px),
        decoration: const BoxDecoration(
          gradient: LinearGradient(
            colors: [AppTheme.titleStartColor, AppTheme.titleEndColor],
            begin: Alignment.centerLeft,
            end: Alignment.centerRight,
          ),
        ),
        child: Text(
          title,
          style: TextStyle(
              color: Colors.white,
              fontSize: 14.px,
              fontWeight: FontWeight.w900),
        ),
      ),
    );
  }

  Widget buildDeviceState(){
    return type.isNotEmpty ? Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        buildOval(),
        SizedBox(width: 2.px),
        Text(type, style: TextStyle(fontSize: 14.px, color: Colors.green)),
        SizedBox(width: 6.px)
      ],
    ) : const Row();
  }

  Widget buildOval() {
    return Container(
      height: 8.px,
      width: 8.px,
      decoration: BoxDecoration(
          color: Colors.green,
          borderRadius: BorderRadius.all(Radius.circular(6.px))),
    );
  }
}
